<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue-2.6.12.js"> </script>
    <script type="text/javascript" src="../js/vue-router-3.4.9.js"> </script>
    <script type="text/javascript" src="../js/myajax.js"></script>
    <script type="text/javascript" src="../js/qs-6.9.4.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/pro/show"><button>查询</button></router-link>
        <router-link to="/pro/add"><button>添加</button></router-link>
        <hr>
        <router-view></router-view>
    </div>
    <template id="pro-table">
        <div>
            <table border="1">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>商品</th>
                    <th>价格</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="p in list" :key="p.id">
                        <td>{{p.id}}</td>
                        <td>{{p.name}}</td>
                        <td>{{p.price}}</td>
                        <td>{{p.desc}}</td>
                        <td>
                            <button @click="deleteProduct(p.id)">删除</button>
                            <router-link :to="{path:'/pro/update',query:{productId:p.id}}"><button>更新</button></router-link>
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>
                <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)"><button style="margin: 0 10px">{{page}}</button></a>
            </p>
        </div>
    </template>
    <template id="add-form">
        <div>
            <form action="" @submit.prevent="addOne">
                商品名：<input type="text" v-model="p.name"><br>
                价格：<input type="text" v-model="p.price"><br>
                描述<input type="text" v-model="p.desc"><br>
                <input type="submit" value="添加">
            </form>
        </div>
    </template>
    <template id="update-form">
        <div>
            <form action="" @submit.prevent="updateOne">
                编号：<input type="text" readonly="readonly" v-model="p.id"><br>
                商品名：<input type="text" v-model="p.name"><br>
                价格：<input type="text" v-model="p.price"><br>
                描述<input type="text" v-model="p.desc"><br>
                <input type="submit" value="更新">
            </form>
        </div>
    </template>
    <script>
        const updateForm ={
            template:"#update-form",
            data(){
                return {
                    p:{}
                }
            },
            created(){
                axios.get("/Product/product/showOne",{
                    params:{
                        productId:this.$route.query.productId
                    }
                }).then(resp=>{
                    let responseData = resp.data;
                    this.p = responseData;
                }).catch(error=>console.log(error))
            },
            methods:{
                updateOne:function () {
                    axios.post("/Product/product/updateOne",
                        Qs.stringify({p:this.p},{allowDots:true})).then(resp=>{
                        let responseData = resp.data;
                        if (responseData.status == "success") {
                            alert("更新成功");
                            this.$router.push("/pro/show");
                        }else{
                            alert("更新失败");
                        }

                    })
                }
            }
        }
        const productTable = {
            template:"#pro-table",
            data(){
                return{
                    list:[],
                    pages:[]
                }
            },
            created: function(){
                this.handleAClick(1);
            },
            methods:{
                handleAClick(i){
                    console.log(i);
                    axios.get("/Product/product/show",{
                        params:{
                            pageNum:i,
                            pageSize:5
                        }

                    }).then(resp=>{
                        let data = resp.data;
                        this.list = data.list;
                        this.pages = data.pages;
                    })
                },
                deleteProduct:function (i) {
                    let isDelete = confirm("确定删除吗?");
                    if(!isDelete){
                        return ;
                    }
                    axios.get("/Product/product/deleteOne",{
                        params:{
                            productId:i
                        }

                    }).then(resp=>{
                        let responseData = resp.data;
                        console.log(responseData);
                        if(responseData.status == "success"){
                            alert("删除成功");
                            this.handleAClick(1);
                        }else{
                            alert("删除失败");
                        }
                    })
                }
            }
        }
        const addForm = {
            template: "#add-form",
            data() {
                return {
                    p:{}
                }
            },
            methods: {
                addOne:function(){
                    axios.post("/Product/product/add",Qs.stringify({p:this.p},{allowDots:true}))
                        .then(resp=>{
                            if(resp.data.status == "success"){
                                alert("添加成功");
                                this.$router.push("/pro/show");
                            }else{
                                alert("添加失败");
                            }
                        })
                }
            }
        }

        let router = new VueRouter({
            routes:[
                {path:"/",redirect:"/pro/show"},
                {path:"/pro/show",component:productTable},
                {path:"/pro/add",component:addForm},
                {path:"/pro/update",component:updateForm}

            ]
        })
        new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>